<!--
  自定义头部组件：兼容小程序与H5
      注意: 请将src/pages.json中的"globalStyle"中的"navigationStyle"设置为"custom"
      头部的总高度 = 状态栏+头部        所以我们在计算的时候需要减去 84px / 168rpx

-->
<template>
  <view class="hunk-header">
    <view :style="{ height: stateBarHeight + 'rpx' }"></view>
    <view v-if="show" class="header-tabBar" :style="{ height: tabBarHeight + 'rpx' }">
      <view class="left">
        <i :class="['iconfont', iconStyle]" @tap="backFn"></i>
      </view>
      <view class="center">{{ name }}</view>
      <view class="right">
        <!-- #ifdef !MP-WEIXIN -->
        <!-- 在这里可以书写H5需要的一些内容，扩充使用！ -->
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stateBarHeight: 0, //状态栏的高度(在小程序中有值，在H5下为0)
      tabBarHeight: 80 //获取头部高度(针对于H5设置的值，单位为rpx)
    }
  },
  props: {
    // 头部名称
    name: {
      type: String,
      default: '头部组件'
    },
    // 背景色
    // bgColor: {
    //   type: String,
    //   default: '#fff'
    // },
    // 字体颜色
    color: {
      type: String,
      default: '#333'
    },
    // 是否显示头部
    show: {
      type: Boolean,
      default: true
    },
    // 左侧图标( back:返回箭头; home:主页; none:不显示 )
    icon: {
      type: String,
      default: 'back'
    },
    // 是否启用自定义事件
    customEvent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // headStyle() {
    //   let obj = {}
    //   obj.backgroundColor = this.bgColor
    //   return obj
    // },
    // centerStyle() {
    //   let obj = {}
    //   obj.color = this.color
    //   return obj
    // },
    iconStyle() {
      let str = ''
      if (this.icon == 'back') {
        str = 'icon-zuo'
      } else if (this.icon == 'home') {
        str = 'icon-shouye'
      }
      return str
    }
  },
  created() {
    // 获取设备信息
    this.getStateBarHeight()

    // 获取小程序右侧悬浮按钮
    // #ifdef MP-WEIXIN
    this.getMenuButtonInfo()
    // #endif
  },
  methods: {
    getStateBarHeight() {
      if(uni.getSystemInfoSync()){
        let systemInfo = uni.getSystemInfoSync()
        this.stateBarHeight = systemInfo.statusBarHeight * 2 //获取状态栏的高度(在小程序中有值，在H5下为0)
      }
      
    },
    getMenuButtonInfo() {
      try{
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        this.tabBarHeight = (menuButtonInfo.bottom + menuButtonInfo.top - this.stateBarHeight) * 2
        // this.$emit('tabBarHead', this.tabBarHeight+this.stateBarHeight)
      }catch(e){
      }
    },
    backFn() {
      if (this.customEvent) {
        this.$emit('headFn')
        return
      }
      if (this.icon == 'back') {
        uni.navigateBack({ delta: 1 })
        return
      }
      if (this.icon == 'home') {
        console.log('home2222')
        uni.reLaunch({
          url: '/pages/index/index',
          fail: (err)=>{
            console.log(9999,err)
          }
        })
        return
      }
      if (this.icon == 'none') {
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hunk-header {
  background: #F2F2F2;
  box-shadow: 0px 1px 0px 0px #D7D6D4;
  width: 100vw;
  // position: fixed;
  // top: 0;
  // left: 0;
  // z-index: 1000;
  // filter: blur(10px);
  .header-tabBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    .left {
      width: 50px;
    }
    .center {
      flex: 1;
      font-size: 17px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #181818;
      line-height: 17px;
      padding: 0 20px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .right {
      width: 50px;
      text-align: right;
      font-size: 14px;
      color: red;
    }
  }
}
</style>
